<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/csspuls/index.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/common.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/index.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/styles/icon/iconfont.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/animate.min.css">
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
    </style>


<body>
<div class="app" id="app">
    <div style="background: white;width: 97%;height:95%;padding:15px;margin: 20px">
        <template>
                    <div style="width:10%;margin-top:10px">
                        <el-card shadow="always" style="width:150px">
                            <el-button type="primary" round @Click="addCourse">添加课程</el-button>
                            <el-dialog title="课程添加" :visible.sync="dialogFormVisible1">
                                <el-form ref="form2" :model="form2">
                                    <el-form-item label="课程名" :label-width="formLabelWidth">
                                        <el-input v-model="form2.lesson_name" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="课程价格" >
                                        <el-input  v-model="form2.lesson_price" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="课程描述" >
                                        <el-input type="textarea"  v-model="form2.lesson_description" autocomplete="off"></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                                    <el-button type="primary" @click="addNewCourse">添加课程</el-button>
                                </div>
                            </el-dialog>
                        </el-card>

                    </div>
            <div style="margin: 1px">
                <el-table :data="pagination.list" style="width: 100%">
                    <el-table-column label="课程编号" prop="id"></el-table-column>
                    <el-table-column label="课程名" prop="lesson_name"></el-table-column>
                    <el-table-column label="课程价格" prop="lesson_price" ></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="props">
                            <el-button  size="mini"@click="setDialogFormVisible(props.row.id)">编辑</el-button>

                            <el-dialog title="课程修改" :visible.sync="dialogFormVisible">
                                <el-form ref="form1" :model="form1">
                                    <el-input v-model="form1.id" style="display: none;" ></el-input>

                                    <el-form-item label="课程名" :label-width="formLabelWidth">
                                        <el-input v-model="form1.lesson_name" autocomplete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item label="课程价格" >
                                        <el-input v-model="form1.lesson_price" ></el-input>
                                    </el-form-item>
                                    <el-form-item label="课程描述" >
                                        <el-input v-model="form1.lesson_description" ></el-input>
                                    </el-form-item>
                                </el-form>
                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="updateCourse">修改</el-button>
                                </div>
                            </el-dialog>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="open(props.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top:3px"
                               background
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="pagination.pageNum"
                               :page-sizes="[5, 10, 15, 20]"
                               :page-size="pagination.pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="pagination.total">
                </el-pagination>
            </div>
        </template>
    </div>
</div>


<script src="${pageContext.request.contextPath}/statics/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/vue-2.6.12.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/axios-0.20.0.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/index.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            // 分页查询
            pagination: {
                pageNum: 1,  //当前页
                pageSize: 10, //每页显示条数
                total: 0, //总条数
                pages: 0, //总页数
                list: [],//当前页数据集合
            },
            dialogFormVisible: false,
            dialogFormVisible1: false,
            form1: {
                lesson_name:'',
                lesson_description:'',
                lesson_price:'',
            },
            form2:{
                lesson_name:'',
                lesson_description:'',
                lesson_price:'',
            },
            formLabelWidth: '100px'
        },
        methods:{
            // 分页查询课程
            onQuerySubmit() {
                let params = new URLSearchParams();
                params.append('pageNum',this.pagination.pageNum);
                params.append('pageSize', this.pagination.pageSize);
                axios.post("${pageContext.request.contextPath}/course/findAllCourse",params).then(response => {

                    if(response.data.code ===1){
                        this.pagination = response.data.data;
                    }
                })
            },
            // 分页查询部分
            handleSizeChange(val) {
                // 赋值
                this.pagination.pageSize = val;
                // 查询
                this.onQuerySubmit();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                // 赋值
                this.pagination.pageNum = val;
                // 查询
                this.onQuerySubmit();
                console.log(`当前页: ${val}`);
            },
            // 删除课程
            handleDelete(userId) {
                let params = new URLSearchParams();
                params.append('id', userId);
                axios.post("${pageContext.request.contextPath}/course/deleteCourseById", params).then(response =>{
                    if(response.data.code ===1 ){
                        this.onQuerySubmit();
                    }
                })
            },
            open(userId) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(userId);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            setDialogFormVisible(id){
                this.dialogFormVisible=true;
                // 回显修改数据
                let params = new URLSearchParams();
                params.append('id', id);
                axios.post("${pageContext.request.contextPath}/course/queryCourseToUpdate", params).then(response =>{
                    if(response.data.code ===1){
                        this.form1 = response.data.data;
                    }
                })
            },
            // 修改课程
            updateCourse(){
                this.dialogFormVisible=false;
                let params = {...this.form1}
                axios.post("${pageContext.request.contextPath}/course/updateCourse", params).then(response =>{
                    if(response.data.code === 1){
                        this.$notify({title: '成功', message: '修改完成！', type: 'success'});
                        this.onQuerySubmit();
                    }
                })
            },
            // 添加课程
            addCourse(){
                this.dialogFormVisible1=true;
            },
            addNewCourse(){
                let params = {...this.form2}
                axios.post("${pageContext.request.contextPath}/course/addNewCourse", params).then(res =>{
                    if(res.data.code ===1){
                        this.$notify({title: '成功', message: '添加完成！', type: 'success'});
                        this.dialogFormVisible1=false;
                        this.onQuerySubmit()
                    }
                })
            },

        },
        created(){
            this.onQuerySubmit()
        }
    })
</script>
</body>
</html>
